<template>
	<view class="temp">
		<navbar title='推荐' height="176rpx" background="linear-gradient(180deg, rgba(68, 212, 168, 0.3) 0%, rgba(255, 255, 255, 1) 100%)"></navbar>
		<view scroll-y="true" class="customContent" :style="{top: isH5 ? '150rpx' : `${50 + statusBarHeight}px`}">
			<view class="serchContent">
				<view class="top-navbar">
					<view :class="currentIndex==1?'active':''" @tap="changeType(1)">医师</view>
					<view :class="currentIndex==2?'active':''" @tap="changeType(2)">机构</view>
				</view>
				<view class="physician-content">
					<view class="search">
						<u-search shape="square" placeholder="搜索医师名称等信息" v-model="keyword"
							:showAction="false"></u-search>
					</view>
					<view class="nav-list">
						<view class="nav-item" :class="{active:index===0}" v-for="(item,index) in 20" :key="index">临床
						</view>
					</view>
					<view class="filter">
						<dropdown :data="filter_action" :showSearch="true"></dropdown>
					</view>
				</view>
			</view>
			<view class="dataCon">
				<physicianList v-if="currentIndex==1" :data="physicianList" @appointment="handleClickAppointment" @open="handleClickOpen">
				</physicianList>
				<institutionList v-else :data="institutionList" @appointment="handleClickAppointment"
					@open="handleClickOpen"></institutionList>
			</view>
		</view>
	</view>
</template>

<script>
	import navMixin from "@/mixin/navMixin.js"
	export default {
		mixins: [navMixin],
		data() {
			return {
				currentIndex: 1,
				keyword: "",
				nav_top_background: "#44D4A8",
				physicianList: Array.from({
					length: 20
				}, (_, i) => i + 1).map((item) => {
					return {
						"level": "初级师",
						"name": "艾师傅",
						"star": "4.5",
						"address": "东莞",
						"price": "286.00",
						"image": "/static/images/physician-logo.png",
					}
				}),
				institutionList: Array.from({
					length: 20
				}, (_, i) => i + 1).map((item) => {
					return {
						"level": "二甲",
						"name": "东莞市第一人民医院",
						"time": "08:00-12:00 | 02:30-05:30",
						"address": "广东省东莞市东城街道光明新路29号",
						"price": "288",
						"image": "/static/images/institution-logo.png",
					}
				}),
				filter: {
					value1: "wq",
					value2: 2,
				},
				filter_action: [{
						title: "职业",
						options: [{
								label: '默认排序',
								value: 1,
							},
							{
								label: '距离优先',
								value: 2,
							},
							{
								label: '价格优先',
								value: 3,
							}
						]
					},
					{
						title: "年龄",
						options: [{
								label: '默认排序',
								value: 1,
							},
							{
								label: '距离优先',
								value: 2,
							},
							{
								label: '价格优先',
								value: 3,
							}
						]
					}
				]
			};
		},
		methods: {
			changeType(val) {
				this.currentIndex = val
			},
			handleClickAppointment() {
				console.log("列表预约");
			},
			handleClickOpen() {
				console.log("列表打开");
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		color: rgba(153, 153, 153, 1);
		font-size: 24rpx;
	}

	.topCon {
		position: absolute;
		width: 100%;
		height: 456rpx;
		background: linear-gradient(180deg, rgba(68, 212, 168, 0.6) 15%, rgba(255, 255, 255, 0.5) 85%);
		z-index: 1;
	}

	.customContent {
		position: relative;
		z-index: 99;
	}

	.temp {
		position: relative;

		.serchContent {
			padding: 24rpx;
			background-color: #FFF;

			.top-navbar {
				position: relative;
				display: flex;
				border: 6rpx #EBF7F2 solid;
				padding: 6rpx;
				border-radius: 24rpx;
				background: rgba(235, 247, 242, 1);
				;

				>view {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 68rpx;
					width: calc(100% / 2);
					border-radius: 20rpx;
					font-size: 32rpx;
					font-weight: 400;
					color: $theme-color;
					background-color: #EBF7F2;
				}

				>view.active {
					color: #FFF;
					font-weight: 500;
					background-color: #44D4A8;
				}
			}

			.physician-content {
				margin-top: 32rpx;

				.search {
					position: relative;
				}

				.nav-list {
					margin: 32rpx 0;
					display: flex;
					column-gap: 24rpx;
					overflow: auto;

					.nav-item {
						min-width: 112rpx;
						height: 48rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
						border-radius: 24rpx;
						background: rgba(246, 248, 252, 1);
						display: inline-flex;
						justify-content: center;
						align-items: center;
						flex-wrap: nowrap;
					}

					.nav-item.active {
						font-weight: 500;
						background-color: $theme-color;
						color: #FFF;
					}
				}

				.filter {
					position: relative;
				}
			}
		}

		.dataCon {
			padding: 24rpx 24rpx 0 24rpx;
			background-color: #F5F5F5 !important;
		}
	}

	::v-deep .u-search__content {
		height: 80rpx;
		background: rgba(246, 248, 252, 1) !important;
		border-radius: 24rpx !important;
	}

	::v-deep .u-search__content__input {
		background-color: rgba(246, 248, 252, 1) !important;
	}

	.u-search__content__input {
		background-color: rgba(246, 248, 252, 1) !important;
	}
</style>